<template>
  <div class="search_box">
    <HYTitle title="chaxun" isCenter="center" />
    <van-cell-group>
      <van-field v-model="licensee" label="姓名" placeholder="请输入姓名" />
      <van-field
        v-model="number"
        label="档案标号"
        placeholder="请输入档案标号"
      />
    </van-cell-group>
    <van-button
      @click="handSearch()"
      style="width: 100%; margin-top: 24px"
      size="small"
      color="#BF1425"
      >查 询</van-button
    >
    <div class="content">
      {{ content }}
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";
import HYTitle from "@/components/HYTtile.vue";
import { Toast } from "vant";
import { useRouter } from "vue-router";
export default defineComponent({
  name: "Search",
  components: {
    HYTitle,
  },
  props: {},

  setup() {
    const state = reactive({ licensee: "", number: "", content: "" });
    const router = useRouter();
    const handSearch = async () => {
      if (!state.licensee) {
        Toast.fail("请输入姓名");
        return;
      }
      if (!state.number) {
        Toast.fail("请输入档案标号");
        return;
      }
      router.push({
        path: "/searchRes",
        query: {
          licensee: state.licensee,
          number: state.number,
        },
      });
    };
    return { ...toRefs(state), handSearch };
  },
});
</script>
<style lang="scss" scoped>
.search_box {
  .content {
    font-size: 14px;
    margin-top: 20px;
    text-align: center;
    color: $themeColor !important;
  }
}
</style>
